<template>
  <div>
    <van-nav-bar
  title="发布菜谱"
  left-text="返回"
  left-arrow
  right-text="存草稿"
  right-records
  fixed
  @click-left="onClickLeft"
/>
<div  class="mianBox">
  <h3 class="uploadPic"><van-icon name="upgrade" />上传主图</h3>
  <van-uploader v-model="fileList" multiple />
  <van-cell-group>
  <van-field v-model="title" placeholder="点我为菜谱编辑一个标题吧" class="noneTit"/>
  <van-field
  v-model="message"
  rows="1"
  autosize
  label="说明"
  left-icon="records"
  type="textarea"
  placeholder="关于这道菜,我想说"
/>
  <div class="main">
    <h3 class="ingred"><van-icon name="orders-o" />主料</h3><van-field v-model="main_ing" placeholder="编辑主料" class="mainIng"/><h3 class="quant">用量</h3><van-field v-model="main_quant" placeholder="编辑主料用量" class="mainIng"/>
  </div>
  <div class="sub">
    <h3 class="ingred"><van-icon name="orders-o" />辅料</h3><van-field v-model="sub_ing" placeholder="编辑辅料" class="mainIng"/><h3 class="quant">用量</h3><van-field v-model="sub_quant" placeholder="编辑辅料用量" class="mainIng"/>
  </div>
  <div class="ing">
    <h3 class="ingred"><van-icon name="orders-o" />调料</h3><van-field v-model="i_ing" placeholder="编辑调料" class="mainIng"/><h3 class="quant">用量</h3><van-field v-model="i_quant" placeholder="编辑调料用量" class="mainIng"/>
  </div>
  <van-button type="info" class="sub">发布</van-button>
</van-cell-group>
</div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileList:[],
        message:'',
        title:'',
        main_ing:'',
        main_quant:'',
        sub_ing:'',
        sub_quant:'',
        i_ing:'',
        i_quant:''
      }
    },
    methods: {
    onClickLeft() {
      this.$router.history.go(-1)
    },
  },
  }
</script>

<style lang="scss" scoped>
.sub{
  width: 100%;
}
.mainIng{
  margin: 10px;
}
.ingred{
  font-size: 20px;
  font-weight: 900;
  color: #000;
}
.quant{
  font-size: 16px;
  font-weight: 900;
  color: rgb(22, 21, 21);
}
.mianBox{
  width: 100vw;
  box-sizing: border-box;
  margin-top: 46px;
  padding: 0 16px 0 16px;
  margin-bottom: 20px;
}
.uploadPic{
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 900;
  color: #000;
}
.noneTit{
  font-size: 18px !important;
  text-align: center !important;
}
</style>